<template >
  <el-drawer
    class="dra_r"
    :title="title"
    :visible="display"
    :direction="direction"
    :size="width"
    :modal="modal"
    :wrapperClosable="wrapperClosable"
    @close="closeDrawer"
  >
    <slot></slot>
  </el-drawer>
</template>

<script>
export default {
  props: {
    wrapperClosable: {
      type: Boolean,
      default: false,
    },
    modal: {
      type: Boolean,
      default: true,
    },
    display: {
      type: Boolean,
      default: false,
    },
    direction: {
      type: String,
      default: "rtl",
    },
    width: {
      type: [String, Number],
      default: "500px",
    },
    title: {
      type: String,
      default: "标题",
    },
  },
  methods: {
    closeDrawer() {
      this.$emit("update:display", false);
      // this.$emit("closeDrawer");
    },
  },
};
</script>

<style scoped>
</style>